<template>
  <div class="audit-cancellationProductAndPrice-view">

    <el-form :inline="true" label-width="110px" label-position="right">

      <el-row>

        <el-col :span="8">
          <el-form-item label="流程编号：">
            {{ detailData.processNo }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="创建时间：">
            {{ dateFormat('yyyy-mm-dd',detailData.startTime) }}
          </el-form-item>
        </el-col>

        <el-col :span="8">
          <el-form-item label="创建人：">
            {{ detailData.initiator }}
          </el-form-item>
        </el-col>

      </el-row>

    </el-form>

    <item-title title="招商要素信息" />

    <el-form
      :inline="true"
      label-width="110px"
      label-position="right"
      size="small"
      class="filter-form-inline"
    >
      <el-row style="margin-left: 0px;margin-right:0px;">

        <el-col :span="8">
          <el-form-item
            label="代理商名称："
            style="width: 100%;"
          >
            <span v-if="datas.agentType == 'agent'">{{ datas.agentName }}</span>
            <span v-else>{{ datas.userName }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="招商要素编号："
            style="width: 100%;"
          >
            {{ datas.agentProductNumber }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="产品信息："
            style="width: 100%;"
          >
            {{getProductName(datas)}}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="可营销终端："
            style="width: 100%;"
          >
            {{ getLabel('app_mode',datas.terminalType) }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="代理属性："
            style="width: 100%;"
          >
            {{ getLabel(datas.agentType , datas.agentAttribute) }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="代理地区："
            style="width: 100%;"
          >
            <area-list-view :areas="datas.region" />
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="交易价："
            style="width: 100%;"
          >
            <span>{{ datas.tradePrice }}元/{{ getLabel('sell_unit',datas.sellUnit) }}</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="销量保证金："
            style="width: 100%;"
          >
            <span v-if="datas.minSalePromise">{{ datas.minSalePromise }}元</span>
            <span v-else>未设置</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="最低销量："
            style="width: 100%;"
          >
            <span v-if="datas.minSale">{{ datas.minSale }}{{ getLabel('sell_unit',datas.sellUnit) }}/{{ getLabel('sell_num_unit',datas.minSaleUnit) }}</span>
            <span v-else>未设置</span>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="负责营销职员："
            style="width: 100%;"
          >
            {{ datas.headName }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="代理期限至："
            style="width: 100%;"
          >
            {{ dateFormat('yyyy-mm-dd',datas.agentEndTime) }}
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item
            label="作废原因："
            style="width: 100%;"
          >
            {{ datas.banReason }}
          </el-form-item>
        </el-col>

      </el-row>
    </el-form>

  </div>
</template>

<script>
// 作废代理产品与价格审批
import {defineComponent, reactive, toRefs, watch} from 'vue'

export default defineComponent({
  name: 'CancellationProductAndPrice',
  props: {
    detailData: {
      type: Object,
      default: {},
    },
  },
  setup(props) {
    var data = reactive({
      datas: {},
      type: 'agent',
    })

    watch(
      () => props.detailData,
      (newval, oldval) => {
        if (newval && newval.data) {
          console.log(newval.data)
          if (
            newval.processDefinitionKey == 'agentPersonProductCreate' ||
            newval.processDefinitionKey == 'agentPersonProductChangePrice' ||
            newval.processDefinitionKey == 'agentPersonProductBan'
          ) {
            data.type = 'agent_person'
          }
          data.datas = newval.data
        }
      },
      { immediate: true, deep: true }
    )

    return {
      ...toRefs(data),
    }
  },
})
</script>

<style scoped>
</style>
